$(function () {
    //1.抽取变量
    var emp_datagrid = $("#emp_datagrid");
    var emp_dialog = $("#emp_dialog");
    var emp_form = $("#emp_form");
    var state_btn = $("#state_btn");

    emp_datagrid.datagrid({
        url: '/employee/query.do',
        fit: true,
        fitColumns: true,
        toolbar: '#emp_toolbar',
        pagination: true,
        rownumbers: true,
        striped: true,
        sortName: 'hireDate',
        sortOrder: 'desc',
        singleSelect: true,
        columns: [
            [
                {field: 'id', checkbox: true},
                {field: 'username', title: '用户名', width: 80},
                {field: 'realname', title: '真实姓名', width: 80},
                {field: 'email', title: '邮箱', width: 80},
                {
                    field: 'dept', title: '部门名称', width: 80, formatter: function (value) {
                        return value ? value.name : "";
                    }
                },
                {field: 'tel', title: '电话', width: 80},
                {field: 'hireDate', title: '入职时间', width: 80, sortable: true},
                {
                    field: 'state', title: '状态', width: 80, formatter: function (value) {
                        return value ? "在职" : "<font color='red'>离职</font>";
                    }
                },
                {
                    field: 'admin', title: '是否管理员', width: 80, formatter: function (value) {
                        return value ? "是" : "否";
                    }
                }
            ]],
        onSelect: function (index, row) {
            //判断员工的状态来显示按钮文字
            if (row.state) {
                state_btn.linkbutton({
                    text: "离职"
                })
            } else {
                state_btn.linkbutton({
                    text: "复职"
                })
            }

        }
    });

    emp_dialog.dialog({
        width: 300,
        height: 385,
        buttons: '#form_btns',
        closed: true,
        onClose: function () {
            //清空表单
            emp_form.form('clear');
        }
    })

    //2.使用一个对象来统一管理事件的方法
    var methodObj = {

        add: function () {

            //显示密码框
            $("#tr_password").show();
            //启动验证
            $("#password").passwordbox('enableValidation');

            //打开弹出框
            emp_dialog.dialog('open');
            emp_dialog.dialog('setTitle', '新增员工');
        },

        edit: function () {
            var row = emp_datagrid.datagrid('getSelected');
            if (row == null) {
                $.messager.alert('温馨提示', '请选择一条数据!', 'warning');
                return;
            }

            //隐藏密码框
            $("#tr_password").hide();

            //禁用验证
            $("#password").passwordbox('disableValidation');


            if (row.dept) {
                row["dept.id"] = row.dept.id;
            }

            //回显数据
            emp_form.form('load', row);

            //通过员工id查询角色的id集合
            $.get('/role/selectByEmployeeId.do',{employeeId:row.id},function (data) {
                //回显角色下拉框
                $("#role_combobox").combobox('setValues',data);
            })

            //打开弹出框
            emp_dialog.dialog('open');
            emp_dialog.dialog('setTitle', '新增员工');
        },

        save: function () {
            //提交表单
            emp_form.form('submit', {
                url: '/employee/saveOrUpdate.do',
                onSubmit:function(param){
                    //获取下拉框选中的所有数据
                   var roleIds = $("#role_combobox").combobox('getValues');
                    for(var i=0;i<roleIds.length;i++){
                        //添加角色的参数
                        param["roles["+i+"].id"] = roleIds[i];
                    }

                    //手动调用验证表单的方法
                    return emp_form.form('validate');
                },
                success: function (data) {
                    data = $.parseJSON(data);
                    if (data.success) {
                        //提示用户操作结果
                        $.messager.alert('温馨提示', '保存成功!', 'info', function () {
                            methodObj.cancel();
                            emp_datagrid.datagrid('reload');
                        });
                    } else {
                        $.messager.alert('温馨提示', data.msg, 'error');
                    }
                }
            })


        },

        cancel: function () {
            emp_dialog.dialog('close');
        },

        changeState: function () {
            var row = emp_datagrid.datagrid('getSelected');
            if (row == null) {
                $.messager.alert('温馨提示', '请选择一条数据!', 'warning');
                return;
            }

            $.messager.confirm('确认', '您确认要操作吗？', function (r) {
                if (r) {
                    $.get('/employee/changeState.do', {id: row.id}, function (data) {
                        if (data.success) {
                            $.messager.alert('温馨提示', '操作成功!', 'info', function () {
                                emp_datagrid.datagrid('reload');
                            });
                        } else {
                            $.messager.alert('温馨提示', '操作失败!', 'error');
                        }
                    })
                }
            });
        },

        query: function () {
            //获取输入框的值
            var value = $("#keyword").textbox('getValue');

            emp_datagrid.datagrid('load', {
                keyword: value
            })
        }
    }

    //3.统一绑定事件
    $("a[data-cmd]").click(function () {
        var methodName = $(this).data("cmd");
        methodObj[methodName]();
    })




})


